<html>
	<head>
		<title>Test</title>
		<link rel="stylesheet" href="../css/style.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
		<style>
			#dialog { min-width: 200px; }
		</style>
	</head>
	<body class="claro">
		<input id="query" />
		<button id="run" type="button"></button>
		<select id="attributes"></select>
		<select id="selected"></select>
		<button id="select" type="button"></button>
		<button id="deselect" type="button"></button>
		<button id="save" type="button"></button>
		<div id="grid"></div>
	    <script>dojoConfig = {
            parseOnLoad: true,
            isDebug: true,
            baseUrl: "/dojo/js/",
            tlmSiblingOfDojo: false,
            packages: [
                { name: "my", location: "my" }
            ]};</script>	
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>
        <script>
			require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button",
				"dijit/form/MultiSelect", "dijit/form/TextBox", "dijit/registry", "dojox/grid/DataGrid", "dojo/store/Memory",
				"dojo/data/ObjectStore", "dojo/dom", "dojo/request", "dojo/_base/window", "dojo/json", "dijit/Dialog", 
				"dijit/MenuBar", "dijit/PopupMenuBarItem", "dijit/Menu", "dijit/MenuItem", "dijit/DropDownMenu", "dijit/MenuBarItem", "dijit/MenuBar", "dijit/PopupMenuBarItem", "dijit/Menu", "dijit/MenuItem", "dijit/DropDownMenu", "dijit/MenuBarItem", 
				"dojo/query", "dojo/domReady!", "my/createMenu"], 
			function(ready, BorderContainer, ContentPane, Button, MultiSelect, TextBox, registry,
				DataGrid, Memory, ObjectStore, dom, request, win, JSON, Dialog, 
				MenuBar, PopupMenuBarItem, Menu, MenuItem, DropDownMenu, MenuBarItem, query, createMenu){
				ready(function(){
                    var menu = new createMenu();
                    console.log(menu.domNode);
                    console.log(createMenu().domNode);
					var bc = new BorderContainer({style: "height: 900px; width: 1200px", gutters: false});
					var top = new ContentPane({
						region: "top",
						style: "height: 10%",
						content: ""});
					var leading = new ContentPane({
						region: "left",
						style: "height: 90%",
						content: ""});
					var centre = new ContentPane({
						region: "center",
						style: "height: 100%",
						content: ""});
					var trailing = new ContentPane({
						region: "right",
						content: ""});
					var topCentre = new ContentPane({
						region: "top",
						style: "height: 7%;",
						content: ""});
					var bottomCentre = new ContentPane({
						region: "top",
						style: "height: 92%",
						content: ""});
					bcTop = new BorderContainer({gutters: false});
					var topBottom = new ContentPane({
						region: "bottom",
						content: ""});
					var topTop = new ContentPane({
						region: "top",
						content: new createMenu()});
					bcTop.addChild(topBottom);
					bcTop.addChild(topTop);
					bcTop.startup()
					top.set("content", bcTop.domNode);
					//console.log(bc);
					var bcCentre = new BorderContainer();
					bc.addChild(leading);
					bc.addChild(centre);
					bc.addChild(trailing);
					bc.addChild(top);
					var JQL = new TextBox({
						name: "query",
						style: "width: 89%",
						value: "" /* no or empty value? */,
						placeholder: "Insert JQL here."
					}, "query");
					var run = new Button({
						label: "Run",
						style: "width: 10%",
						onClick: function(){
							request.post("getIssues", {
								data: {
									jql: JQL.value,
									number: "1"
								},
								handleAs: "json"}).then(function() {
								
								});
						}
					},"run");
					
					topBottom.set("content", [
						JQL.domNode,
						run.domNode]);
					var attr = dom.byId('attributes');
					var attributes = new MultiSelect({ name: 'attributes', style: "height:500px; width:175px", region: "leading"}, attr);
					request.post("attributes",{
						handleAs: "json"}).then(function(data){
							for(var i = 0; i < data.length; i++){
								column = data[i];
								var attr = dom.byId('attributes');
								var c = win.doc.createElement('option');
								c.innerHTML = column[0];
								c.value = column[1];
								attr.appendChild(c);
							}
						});
					var selected = new MultiSelect({ name: 'selected', style: "height:500px; width:175px"}, "selected");
					var select = new Button({
						//region: "trailing",
						label: "-->",
						onClick: function(){
							registry.byId("selected").addSelected(registry.byId("attributes"));
							var search = [];
							var count = 0;
							query("option", selected.containerNode).forEach(function(n){
									search[count++] = [n.text, n.value];
								});
							console.log(search);
							console.log(selected.value);
							console.log(selected.innerHTML);
							request.post("allBatting", {
									data: {
										data: JSON.stringify({search: search, JQL:JQL.value})
										},
									handleAs: "json"
									}).then(function(data) {
										store = new Memory({ data: data[0].items });
										dataStore = new ObjectStore({ objectStore: store });
										console.log(grid);
										grid.setStore(dataStore, { id: "*"}, {});
										//grid.render();
									});
									}
					},"select");
					var deselect = new Button({
						//region: "leading",
						label: "<--",
						onClick: function(){
							registry.byId("attributes").addSelected(registry.byId("selected"));
						}
					}, "deselect");
					var save = new Button({
						label: "Save",
						onClick: function() {
							var text = new TextBox({
								name: "tableName",
								placeholder: "Table Name"}, "tableName");
							var ok = new Button({
								label: "OK",
								onClick: function(){
								}});
							var dialog = new Dialog({
								title: "Create Table",
								content: [text.domNode, ok.domNode]});
							dialog.show();
						}
					}, "save");
					leading.set("content", [
						attributes.domNode]);
					/*centre.set("content", [
						deselect.domNode,
						select.domNode]);*/
					trailing.set("content", [
						selected.domNode]);
					document.body.appendChild(bc.domNode);
					/*request.post("allBatting", {
						data: {
							data: JSON.stringify({search:[["displayName", ["changelog", "histories", 4, "author", "displayName"]],["field", ["changelog", "histories", 0, "items", 0, "field"]]], JQL:JQL.value})
							},
						handleAs: "json"
						}).then(function(data) {
							store = new Memory({ data: data.items });
							dataStore = new ObjectStore({ objectStore: store });
							console.log(grid);
							grid.setStore(dataStore, { id: "*"}, {});
							//grid.render();
						});*/
					console.log(grid);
					var dataGrid = grid();
					//console.log(dataGrid.domNode);
					centre.addChild(bcCentre);
					bcTopCenter = new BorderContainer();
					TopCenterLeft = new ContentPane({
						region: "leading",
						content: ""});
					TopCenterRight = new ContentPane({
						region: "trailing",
						content: ""});
					TopCenterCenter = new ContentPane({
						region: "center",
						content: ""});
					TopCenterLeft.set("content", [deselect.domNode]);
					TopCenterRight.set("content", [select.domNode]);
					TopCenterCenter.set("content", [save.domNode]);
					bcTopCenter.addChild(TopCenterLeft);
					bcTopCenter.addChild(TopCenterRight);
					bcTopCenter.addChild(TopCenterCenter);
					bc.startup();
					topCentre.set("content", bcTopCenter.domNode);
					bottomCentre.set("content", [
						dataGrid.domNode]);
					bcCentre.addChild(topCentre);
					bcCentre.addChild(bottomCentre);
					bcCentre.startup();
					
					function grid(){

						grid = new DataGrid({
							style: "height: 90%; width: 100%",
							structure: [
							{
									noscroll: true,
									defaultCell: { width: "84px" }
								},{
								}
							]
						}, "grid");
						return grid;
					}
					bc.startup();
				});
			});
		</script>
	</body>
</html>
